<template>
    <sky-base-page padding="26rpx 32rpx 0 32rpx">
        <view class="qrcode-box">
            <up-swiper :list="qrCodeInfo.sharePoster" height="1034rpx" keyName="path" imgMode="scaleToFill"
                       :loading="loading" radius="26rpx" circular/>
            <image v-if="qrCodeInfo.qrCode" mode="widthFix" class="qrcode-img" :src="qrCodeInfo.qrCode"/>
        </view>
<!--        <up-button text="海报保存至相册" type="primary" @tap="saveQrCode"></up-button>-->
    </sky-base-page>
</template>
<script setup>
import env from '@/qly/env'
import sysConfig from '@/qly/config'
import storage from '@/qly/storage'

const loading = ref(true)
const qrCodeInfo = ref({
    qrCode: null,
    sharePoster: [],
    ruleDesc: ''
})

onShow(() => {
    getQrCodeInfo()
})

// 获取分享二维码
async function getQrCodeInfo() {
    const res = await qly.api.user.qrCode();
    if (res.success) {
        qrCodeInfo.value = res.data
        loading.value = false
    }
}

// 保存邀请小程序码
async function saveQrCode() {
    // 开启加载动画
    uni.showLoading({title: "保存中", mask: true});
    const headers = {}
    const token = storage.get(storage.token)
    if (token) {
        headers[sysConfig.tokenName] = token
    }
    
    const fileName = `${new Date().getTime()}.jpg`
    const options = {
        url: env.baseUrl + '/api/mall/user/my/invite/user/qrCode/download',
        header: headers,
        success: (res) => {
            if (res.statusCode === 200) {
                //保存图片至相册
                saveImageToPhotosAlbum(res.tempFilePath, fileName)
            } else {
                showSaveImageToast()
            }
        },
        fail: () => {
            showSaveImageToast()
        }
    }
    options.filePath = `/temp/${fileName}`
    
    // 下载图片资源至本地，返回文件的本地临时路径
    uni.downloadFile(options)
}

// 保存到相册
function saveImageToPhotosAlbum(tempFilePath, fileName) {
    uni.saveImageToPhotosAlbum({
        filePath: tempFilePath,
        fileName: fileName,
        success: function () {
            uni.hideLoading()
            uni.showToast({
                title: '保存成功',
                icon: 'none',
            })
        },
        fail: function () {
            showSaveImageToast()
        }
    });
}

function showSaveImageToast() {
    uni.hideLoading()
    uni.showToast({
        title: '保存失败，请稍后重试',
        icon: 'none',
    })
}
</script>

<style scoped lang="scss">
.qrcode-box {
    position: relative;
    width: 100%;
    background: #E8E8E8;
    border-radius: 26rpx;
    
    .qrcode-img {
        position: absolute;
        width: 27%;
        top: 803rpx;
        left: 461rpx;
    }
}

.top-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24rpx;
    
    .text1, .text2 {
        font-size: 28rpx;
        line-height: 38rpx;
    }
    
    .text1 {
        color: #2FDCB9;
    }
    
    .text2 {
        color: #888888;
    }
}

.rules-box {
    margin-top: 40rpx;
    
    .title {
        font-size: 24rpx;
        color: #000000;
        line-height: 38rpx;
    }
    
    .content {
        font-size: 22rpx;
        color: #888888;
        line-height: 38rpx;
    }
}
</style>
